<template>
  <div class="dswd-login">
    <div v-if="device==='desktop'" ref="loginContainer" class="login-container">
      <div class="login-wrap">
        <div class="login-div">
          <div class="login-header">
            <div class="login-title">
              登&nbsp;&nbsp;录
            <!-- <div class="login-link" @click="toRegister">
              还没有账号，点击注册
            </div> -->
            </div>
          </div>
          <div class="login-form">
            <el-form
              ref="loginForm"
              hide-required-asterisk
              :model="loginForm"
              :rules="loginRules"
              label-position="top"
              status-icon
            >
              <el-form-item prop="account" label="手机号">
                <el-input
                  v-model="loginForm.account"
                  type="text"
                  auto-complete="off"
                  prefix-icon="el-icon-mobile-phone"
                  placeholder="输入手机号"
                  @keyup.enter.native="login"
                />
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  auto-complete="off"
                  show-password
                  placeholder="输入密码"
                  @keyup.enter.native="login"
                />
              </el-form-item>
              <!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> -->
              <el-form-item>
                <el-button
                  type="danger"
                  class="logReg-button"
                  :loading="loading"
                  icon="el-icon-right"
                  @click.native.prevent="login"
                  @keyup.enter.native="login"
                />
              </el-form-item>
            <!-- <el-button type="text">忘记密码</el-button> -->
            </el-form>
          </div>
        </div>
        <div class="login-img" @click="toHome" />
      </div>
    </div>
    <div v-if="device==='mobile'||device==='ipad'" class="dswd-m-login-container">
      <div class="login-wrap">
        <div class="login-div">
          <div class="login-header">
            <div class="login-title">
              登&nbsp;&nbsp;录
            <!-- <div class="login-link" @click="toRegister">
              还没有账号，点击注册
            </div> -->
            </div>
          </div>
          <div class="login-form">
            <el-form
              ref="loginForm"
              hide-required-asterisk
              :model="loginForm"
              :rules="loginRules"
              label-position="top"
              size="small"
              status-icon
            >
              <el-form-item prop="account" label="手机号">
                <el-input
                  v-model="loginForm.account"
                  type="text"
                  auto-complete="off"
                  prefix-icon="el-icon-mobile-phone"
                  placeholder="输入手机号"
                  @keyup.enter.native="login"
                />
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  auto-complete="off"
                  show-password
                  placeholder="输入密码"
                  @keyup.enter.native="login"
                />
              </el-form-item>
              <!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox> -->
              <el-form-item>
                <el-button
                  type="danger"
                  class="logReg-button"
                  :loading="loading"
                  icon="el-icon-right"
                  @click.native.prevent="login"
                  @keyup.enter.native="login"
                />
              </el-form-item>
            <!-- <el-button type="text">忘记密码</el-button> -->
            </el-form>
          </div>
        </div>
        <div class="login-img" @click="toHome" />
      </div>
    </div>
    <Verify
      ref="verify"
      mode="pop"
      captcha-type="blockPuzzle"
      :img-size="{ width: '330px', height: '155px' }"
      @success="success"
    />
  </div>
</template>

<script>
import Verify from '@/components/verifition/Verify'
import { mapState } from 'vuex'
import uuid from 'uuid-v4'
export default {
  name: 'Login',
  components: { Verify },
  data() {
    return {
      loading: false,
      loginForm: {
        account: '',
        password: '',
        captcha: '',
        uuid: '',
        src: ''
      },
      loginRules: {
        account: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      checked: true
    }
  },
  beforeMount() {
    if (
      sessionStorage.getItem('userInfo') !== undefined &&
      sessionStorage.getItem('userInfo') !== null
    ) {
      this.userInfo = Object.assign(
        {},
        JSON.parse(sessionStorage.getItem('userInfo'))
      )
    }
  },
  computed: {
    ...mapState({
      device: (state) => state.app.device
    })
  },
  mounted() {
    this.loginForm.uuid = uuid()
  },
  methods: {
    success(params) {
      this.loading = true
      const userInfo = {
        account: this.loginForm.account,
        password: this.loginForm.password,
        captcha: params.captchaVerification,
        mark: 'web',
        uuid: this.loginForm.uuid
      }
      this.$api.login
        .login(userInfo)
        .then((res) => {
          if (res.code === 200) {
            this.setUserInfo(res.data.token, res.data.details)
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
          this.loading = false
        })
        .catch((res) => {
          this.$message({
            message: res.message,
            type: 'error'
          })
        })
    },
    useVerify() {
      this.$refs.verify.show()
    },
    login() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.useVerify()
        }
      })
    },
    setUserInfo(token, row) {
      sessionStorage.setItem('token', token) // 放置token到本地会话
      sessionStorage.setItem('userInfo', JSON.stringify(row))
      this.toHome() // 登录成功，跳转到主页
    },
    toHome() {
      window.open('/', '_self')
    },
    toRegister() {
      this.$router.push('/register')
    }
  }
}
</script>

<style lang="scss" scoped>
.dswd-login{
  height: 100%;
}
.login-container {
  height: 100%;
  background: url("../assets/image/login/bg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  // background: #f3f5f9;
  .login-wrap {
    background: #fff;
    border-radius: 30px;
    width: 800px;
    max-width: 95%;
    padding: 0 50px;
    padding-top: 40px;
    background: url("../assets/image/login/login-bg.png") no-repeat;
    background-size: 100% 100%;
    box-shadow: 0 0 5px 5px rgba(232, 233, 237, 0.5);
    display: flex;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    justify-content: space-between;
    .login-div {
      width: 45%;
      height: 100%;
      .login-header {
        .login-title {
          height: 40px;
          font-size: 40px;
          line-height: 1;
          font-weight: 600;
          color: #271665;
          position: relative;
          .login-link {
            position: absolute;
            left: 110px;
            bottom: 0;
            display: inline-block;
            font-size: 12px;
            color: #f56c6c;
            cursor: pointer;
          }
        }
      }
      :deep(.login-form) {
        margin-top: 30px;
        .el-form-item {
          margin-bottom: 50px;
          .el-form-item__label {
            margin-left: 15px;
            padding: 0;
          }
          .el-input__suffix {
            .el-icon-circle-check {
              color: #67c23a;
            }
          }
          .el-input__inner {
            border-radius: 20px;
            background-color: #fafbff;
          }
          .el-form-item__error {
            margin-left: 15px;
          }
          .logReg-button {
            height: 50px;
            width: 50px;
            padding: 0;
            border-radius: 20px;
            margin-left: 15px;
            .el-icon-right {
              font-size: 20px;
              font-weight: 600;
            }
          }
        }
      }
    }
    .login-img {
      flex: 1;
      cursor: pointer;
    }
  }
}
.dswd-m-login-container{
  height: 100%;
  position: relative;
  .login-wrap{
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    width: 300px;
    .login-div {
      .login-header {
        .login-title {
          height: 40px;
          font-size: 26px;
          line-height: 1;
          font-weight: 600;
          color: #271665;
          position: relative;
          .login-link {
            position: absolute;
            left: 110px;
            bottom: 0;
            display: inline-block;
            font-size: 12px;
            color: #f56c6c;
            cursor: pointer;
          }
        }
      }
      :deep(.login-form) {
        margin-top: 30px;
        .el-form-item {
          margin-bottom: 50px;
          .el-form-item__label {
            margin-left: 15px;
            padding: 0;
          }
          .el-input__suffix {
            .el-icon-circle-check {
              color: #67c23a;
            }
          }
          .el-input__inner {
            border-radius: 20px;
            background-color: #fafbff;
          }
          .el-form-item__error {
            margin-left: 15px;
          }
          .logReg-button {
            height: 50px;
            width: 50px;
            padding: 0;
            border-radius: 20px;
            margin-left: 15px;
            .el-icon-right {
              font-size: 20px;
              font-weight: 600;
            }
          }
        }
      }
    }
    .login-img {
      flex: 1;
      cursor: pointer;
    }
  }
}
</style>
